<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel Demo</title>
</head>
<body>
<!-- 轮播图容器 -->
<div id="carousel1"></div>

<!-- 引入轮播图组件 -->
<script src="./js/carousel.js"></script>
<script>
    function loadCarousel(){
        // 定义轮播图的配置对象
        const carouselConfig = {
            imageNames: ['img_1.png', 'img_2.png', 'img_3.png'], // 图片名称数组
            imageBasePath: 'imagesForV4', // 图片基础路径(路径最后的分隔符，相关 Carousel 中自动添加)
            autoPlayInterval: 3000, // 自动播放间隔
            transitionType: 'slide' // 切换方式：slide 或 fade
        };

        // 加载轮播图
        function loadCarousel(containerId, config) {
            const container = document.getElementById(containerId);
            if (!container) {
                console.error(`容器元素未找到: ${containerId}`);
                return;
            }
            // 初始化轮播图
            new Carousel(container, config);
        }

        loadCarousel('carousel1', carouselConfig);

        // 页面加载完成后初始化轮播图
        // window.addEventListener('DOMContentLoaded', () => {
        //     loadCarousel('carousel1', carouselConfig);
        // });
    }


    // 匿名方法
    (function () {
        console.log("index_1.html 文件加载成功匿名方法启动...");
        loadCarousel();
        console.log("index_1.html 文件加载成功匿名方法执行完成...");
    })();


</script>
</body>
</html>